<!doctype html>
<html xmlns:th="www.thymeleaf.org">
<meta charset="utf-8">
<head th:replace="index::head"></HEAD>
<style>
#mainleft .title{
	display:none
}
</style>
<BODY>
	<header th:replace="index::#ph"></header>
	<main class="layui-fluid">
	<div style="padding: 3px 8px">
		<span class="layui-breadcrumb">
			<a href="/">作业论坛首页</a>
			<a>
				<cite>他山之石</cite>
			</a>
		</span>
	</div>
	<div style="float:left; width:100%; margin-right:-330px">
		<DIV id="mainleft" style="margin-right:330px">
			<div class="layui-bg-green">
			<ul class="layui-nav layui-bg-green left" lay-filter="">
			  <li v-for="c in categorys" class="layui-nav-item" :class="{'layui-this':param()==c.id}">
			  	<a :href="'?'+c.id">{{c.name}}</a>
			  </li>
			</ul>
			<div class="right" style="height:30px;padding: 15px">
				<btn th:if="${session?.loginedUser?.role}==0" @click="add" cls="layui-btn-normal">添加链接</btn>
			</div>
			<div style="clear: both;"></div>
			</div>
			<div class="layui-fluid" style="padding: 2px">
			  <div class="layui-row layui-col-space10">
			   	<category :data="articles.content" cols="1" rows="20" noempty="true"></category>
			  </div>
			</div>
			<page :url="'task/article/find?order=id!&type.id='+param()" data="articles" size="20"></page>
		</div>
		<script type="text/javascript">
		// 必须放在外面，否则会产生诡异的死循环
		var v = new Vue({
			el : "#mainleft",
			data : {
				categorys:[],
				articles:{},
			},
			created(){
				axios.get("task/dict/find?type=category").then(res=>{
					this.categorys = res.data.content;
				});
			},
			methods:{
				add(){
					editIndex = layer.open({
					  type: 1,
					  title: "添加链接",
					  area: '700px',
					  content: $('#editor')
					});
				}
			}
		})
	</script>
	</div>
	<div th:replace="index::#right_side"></div>
	</main>
	<!-- 导入页脚 -->
	<footer th:replace="index::footer"></footer>
	<div id="editor" style="display: none;">
		<form class="layui-form layui-main" style="width: 600px;margin: 30px 30px 80px">
			<div class="layui-form-item">
				<label class="layui-form-label">分类：</label>
				<div class="layui-input-block">
					<layselect items="hwctask/dict/find?type=category"
						model="article.type.id" vf="id" nf="name" :select="param()">
					</layselect>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">课程：</label>
				<div class="layui-input-block">
					<layselect items="hwctask/course/find"
						model="article.course.id" vf="id" nf="name">
					</layselect>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">标题：</label>
				<div class="layui-input-block">
					<input v-model="article.title" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">地址：</label>
				<div class="layui-input-block">
					<input v-model="article.content" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">标签：</label>
				<div class="layui-input-block">
					<input v-model="article.tags" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="text-align: right;">
				<button @click="save" type="button" class="layui-btn">提交</button>
				<button onclick="layer.close(editIndex)" type="button" class="layui-btn">返回</button>
			</div>
		</form>
		<script type="text/javascript">
			var vedit = new Vue({
				el : ".layui-form",
				data : { article: {title:"",content:"",type:{id:""},course:{id:""}}},
				methods : {
					save(){
						let p = usp(this.article,"course","id","type","id");
						p.append("inUser.id",'[[${session?.loginedUser?.id}]]');
						post("/hwctask/article/save", p, res=>{
							location.reload();
						});
					}
				}
			})
			layui.element.render();
		</script>
	</div>
</BODY>
</HTML>
